.navbar.navbar-light.fixed-top.navbar-expand-lg.bg-light
  .container
    a.navbar-brand(href='/')
      i.fas.fa-cube
      | Project name
    button.navbar-toggler(type='button', data-toggle='collapse', data-target='.navbar-collapse')
      span.sr-only Toggle navigation
      span.navbar-toggler-icon
    .collapse.navbar-collapse
      ul.nav.navbar-nav
        li.nav-item(class=(title === 'Home') ? 'active' : undefined)
          a.nav-link(href='/') Home
        li.nav-item(class=(title === 'Docs') ? 'active' : undefined)
          a.nav-link(href='/docs') Docs
      ul.nav.navbar-nav.ml-auto
        if !user
          li.nav-item(class=(title === 'Login') ? 'active' : undefined)
            a.nav-link(href='/login') Login
          li.nav-item(class=(title === 'Create Account') ? 'active' : undefined)
            a.nav-link(href='/signup') Create Account
        else
          li.dropdown(class=(title === 'Account Management') ? 'active' : undefined).nav-item
            a.dropdown-toggle.nav-link(href='#', data-toggle='dropdown')
              if user.profile.picture
                img(src=user.profile.picture)
              else
                img(src=user.gravatar(60))
              span= user.profile.name || user.email || user.id
              i.caret
            div.dropdown-menu
              a.dropdown-item(href='/account') My Account
              div.dropdown-divider
              a.dropdown-item(href='/logout') Logout
